<template>
  <div>
    <div class="select-person-click" style="" @click="reduceSign()">
      <el-tag
        v-for="(tag,index) in reduceSignUserArr"
        :key="index"
        closable
        type="info"
        @close="closeTag(tag)"
      >
        {{ tag.firstName }}
      </el-tag>
      <span v-if="!reduceSignUserArr.length" class="plactext">请选择</span>
    </div>
    <!-- 选人弹框 -->
    <dt-dialog :title="title" :visible.sync="open" width="30%" @comfirmBtn="submitForm" @closeDialog="cancel">
      <div slot="content">
        <!-- 表格 -->
        <el-table
          ref="table"
          v-loading="loading"
          :row-key="getRowKey"
          :data="reduceSignUserList"
          highlight-current-row
          max-height="400"
          style="width: 100%;text-align:center"
          :header-cell-style="{backgroundColor: '#f2f2f2'}"
          @selection-change="handleSelectionChange"
        >
          <template v-if="!reduceSignUserList" slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="firstName"
            label="姓名"
            width="200"
          />
          <el-table-column
            prop="email"
            label="邮件"
            min-width="200"
          />
        </el-table>
      </div>
    </dt-dialog>
  </div>
</template>

<script>
import { findNodeOtherAssignee } from '@/framework/api/affairManage/flowDetail/Config'

export default {
  name: '',
  props: {

    // 值
    value: { // 选中userIds字符串 '1,2,3'
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/require-default-prop
    // reduceSignUserList: {
    //   type: Array
    // },
    flowDealDetail: {
      type: Object
    }
  },
  data: function() {
    return {
      title: '选择减签',
      loading: false,
      open: false,
      selectionData: [],
      reduceSignUserArr: [], // 实际当前选中,
      reduceSignUserList: []
    }
  },
  watch: {
    value: {
      handler: function(newVal, oldVa) {
        if (newVal === '') {
          this.reduceSignUserArr = []
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  methods: {
    // 删除选中
    closeTag(tag) {
      this.reduceSignUserArr = this.reduceSignUserArr.filter(item => item.userId != tag.userId)
      this.dealData()
    },
    dealData() {
      const str = this.reduceSignUserArr.map(res => res.userId).join(',')
      this.$emit('input', str)
    },
    reduceSign() {
      this.open = true
      if (!this.reduceSignUserList.length) {
        this.getfindNodeOtherAssignee()
      } else {
        this.$nextTick(res => {
          this.dealSelectPerson()
        })
      }
    },
    getfindNodeOtherAssignee() {
      // processInstanceId  流程实例id
      // taskId  任务ID
      // targetKey  节点key
      const userdata = {
        processInstanceId: this.flowDealDetail.procIns.id,
        taskId: this.flowDealDetail.id,
        targetKey: this.flowDealDetail.activityId
      }
      findNodeOtherAssignee(userdata).then(res => {
        this.reduceSignUserList = res.data
        this.$nextTick(resp => {
          this.dealSelectPerson()
        })
      })
    },
    handleSelectionChange(val) {
      this.selectionData = val
    },
    // 回显多选选中数据
    dealSelectPerson() {
      if (this.reduceSignUserList.length) {
        this.reduceSignUserArr.forEach(row => {
          const arr = this.reduceSignUserList.filter(res => res.userId === row.userId)
          this.$refs.table.toggleRowSelection(arr[0], true)
        })
      }
    },
    getRowKey(row) {
      return row.userId
    },
    submitForm() {
      this.reduceSignUserArr = JSON.parse(JSON.stringify(this.selectionData))
      this.dealData()
      this.$refs.table.clearSelection()
      this.open = false
    },
    cancel() {
      this.$refs.table.clearSelection()
      this.open = false
    }
  }
}
</script>

<style lang="scss" scoped>
.select-person-click{
  border: 1px #c0c4cc solid;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  height:100%;
  padding: 0px 8px 0 8px;
  margin: auto;
  min-height: 36px;
  .el-tag {
    margin-right: 5px;
    margin-bottom: 4px;
  }
}
.plactext{
  color: #DCDFE6;
}
</style>
